<template>
  <el-select
    :loading="isFirstLoad"
    v-model="payNo"
    filterable
    :placeholder="$t('common.placeholderSelect')"
    @change="handleChange"
    @visible-change="visibleChange"
    v-loadmore="loadMore"
    clearable
  >
    <el-option v-for="item in options" :key="item.id" :label="item.financeNo" :value="item.id"></el-option>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      payNo: '',
      timeout: null,
      options: [],
      page: 1,
      loading: false,
      isFirstLoad: true
    }
  },
  watch: {
    payNo(newVal, oldVal) {
      if (newVal != oldVal) {
        this.page = 1
        this.getFinanceList()
      }
    }
  },
  methods: {
    loadMore() {
      this.getFinanceList()
    },
    visibleChange(v) {
      if (v && this.options.length == 0) {
        this.getFinanceList()
      }
    },
    getFinanceList() {
      if (!this.loading) {
        this.loading = true
        api('admin/finance/getFinanceList', {
          page: this.page,
          rows: 10,
          financeNo: this.payNo
        })
          .then(r => {
            this.loading = false
            this.isFirstLoad = false
            if (r.data.length > 0) {
              this.page++
              this.options = [...this.options, ...r.data]
            }
          })
          .catch(e => {
            this.loading = false
            this.isFirstLoad = false
          })
      }
    },
    handleChange(item) {
      this.$emit('input', item)
    },

    handleSelect(item) {
      this.$emit('input', item.id)
    }
  }
}
</script>
